<template>
  <el-breadcrumb
    :separator-icon="separatorIcon"
    :separator="separator"
    class="custom-breadcrumb"
  >
    <el-breadcrumb-item
      v-for="(item, index) in items"
      :key="index"
      :to="item.path"
      :class="{ 'last-item': index === items.length - 1 }"
      @click="handleItemClick(item, index)"
    >
      <el-icon v-if="item.icon"><component :is="item.icon" /></el-icon>
      <span v-if="!item.ellipsis">{{ item.label }}</span>
      <span v-else :title="item.label">{{ truncateText(item.label, maxLength) }}</span>
    </el-breadcrumb-item>
  </el-breadcrumb>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import type { VNode } from 'vue'
import { HomeFilled, ArrowRight } from '@element-plus/icons-vue'

// 定义面包屑项的类型
interface BreadcrumbItem {
  /**
   * 路由路径
   */
  path: string | Record<string, any> | null
  /**
   * 显示文本
   */
  label: string
  /**
   * 图标组件
   */
  icon?: VNode | (() => VNode) | undefined
  /**
   * 是否省略过长文本
   */
  ellipsis?: boolean
}

// 定义组件属性
const props = defineProps({
  /**
   * 面包屑数据
   */
  items: {
    type: Array as () => BreadcrumbItem[],
    default: () => []
  },
  /**
   * 分隔符
   */
  separator: {
    type: String,
    default: ''
  },
  /**
   * 分隔符图标
   */
  separatorIcon: {
    type: Object,
    default: () => ArrowRight
  },
  /**
   * 最大显示长度
   */
  maxLength: {
    type: Number,
    default: 15
  },
  /**
   * 是否自动添加首页
   */
  autoAddHome: {
    type: Boolean,
    default: true
  },
  /**
   * 首页配置
   */
  homeConfig: {
    type: Object as () => Omit<BreadcrumbItem, 'ellipsis'>,
    default: () => ({
      path: '/',
      label: '首页',
      icon: HomeFilled
    })
  }
})

// 定义组件事件
const emit = defineEmits<{
  'itemClick': [item: BreadcrumbItem, index: number]
}>()

// 处理面包屑项点击
const handleItemClick = (item: BreadcrumbItem, index: number) => {
  emit('itemClick', item, index)
}

// 截断文本
const truncateText = (text: string, maxLength: number): string => {
  if (text.length <= maxLength) {
    return text
  }
  return text.slice(0, maxLength) + '...'
}

// 计算最终的面包屑数据（包含首页）
const breadcrumbItems = computed(() => {
  if (props.autoAddHome) {
    // 检查是否已经包含首页
    const hasHome = props.items.some(item => {
      if (typeof item.path === 'string') {
        return item.path === props.homeConfig.path
      }
      return false
    })
    
    if (hasHome) {
      return props.items
    } else {
      return [props.homeConfig, ...props.items]
    }
  }
  return props.items
})

// 暴露计算属性给模板使用
const items = breadcrumbItems
</script>

<style scoped>
.custom-breadcrumb {
  padding: 10px 0;
  font-size: 14px;
}

:deep(.el-breadcrumb__item) {
  display: flex;
  align-items: center;
}

:deep(.el-breadcrumb__item__inner) {
  color: #606266;
  transition: color 0.3s;
  display: flex;
  align-items: center;
  gap: 4px;
}

:deep(.el-breadcrumb__item__inner:hover) {
  color: #1890ff;
}

:deep(.el-breadcrumb__item:last-child .el-breadcrumb__item__inner) {
  color: #909399;
  cursor: default;
}

:deep(.el-breadcrumb__item:last-child .el-breadcrumb__item__inner:hover) {
  color: #909399;
}

:deep(.el-breadcrumb__separator) {
  color: #c0c4cc;
  margin: 0 8px;
}

/* 最后一项的样式 */
.last-item :deep(.el-breadcrumb__item__inner) {
  font-weight: 500;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .custom-breadcrumb {
    padding: 8px 0;
    font-size: 12px;
  }
  
  :deep(.el-breadcrumb__separator) {
    margin: 0 4px;
  }
}

@media (max-width: 480px) {
  .custom-breadcrumb {
    font-size: 11px;
  }
  
  :deep(.el-breadcrumb__item__inner) {
    gap: 2px;
  }
  
  :deep(.el-icon) {
    width: 14px;
    height: 14px;
  }
}
</style>